<template>
  <div class="ColoumLayout">
    <div class="ColoumLayout--top">
      <slot name="top"></slot>
    </div>
    <div class="ColoumLayout--center">
      <slot ></slot>
    </div>
    <div class="ColoumLayout--footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="scss">
.ColoumLayout{
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  &--top{
  }
  &--center{
    flex-grow: 1;
    overflow: hidden;
  }
  &--footer{
  }
}
</style>